<template>
	<div class="areaBox">
		<div class="area-select-item" v-if="startLevel==1">
			<el-select v-model="selectData.continentId" placeholder="请选择大洲" @change="getGuojia" :style="{width}">
				<el-option v-for="dt in dazhouDatas" :key="dt.areaId" :label="dt.name" :value="dt.areaId"></el-option>
			</el-select>
		</div>
		<div class="area-select-item" v-if="guojiaData.length>0">
			<el-select v-model="selectData.countryId" placeholder="请选择国家" @change="getCity" :style="{width}">
				<el-option v-for="dt in guojiaData" :key="dt.areaId" :label="dt.name" :value="dt.areaId"></el-option>
			</el-select>
		</div>
		<div class="area-select-item" v-if="cityData.length>0">
			<el-select v-model="selectData.cityId" placeholder="请选择城市" @change="getQuYu" :style="{width}">
				<el-option v-for="dt in cityData" :key="dt.areaId" :label="dt.name" :value="dt.areaId"></el-option>
			</el-select>
		</div>
		<div class="area-select-item" v-if="quYuData.length>0">
			<el-select v-model="selectData.areaId" placeholder="请选择区域" @change="setQuYu" :style="{width}">
				<el-option v-for="dt in quYuData" :key="dt.areaId" :label="dt.name" :value="dt.areaId"></el-option>
			</el-select>
		</div>
	</div>
</template>

<script>
	import {get_area_list} from '@/api/collext'
	export default {
		props: {
			value:'',
			disabled:{
				type: Boolean,
				default(){
				    return false  // 默认
				}
			},
			width:{
				type:String,
				default:'400px'
			},
			startLevel:{
				type:Number,
				default:1  // 默认从大洲开始选择
			},
			endLevel:{
				type:Number,
				default:4  // 默认选择到城市下的某个区域
			}
		},
		data() {
			return {
				lists:'',
				dazhouDatas:[],
				guojiaData:[],
				cityData:[],
				quYuData:[],
				selectData:{
					continentId:'', // 大洲ID
					continentName:'', //大洲名称
					countryId:'',  // 国家id
					countryName:'', // 国家名称
					cityId:'', // 城市id
					cityName:'', // 城市名称
					areaId:'',  // 区域id
					areaName:'' // 区域名称
				}
			};
		},
		watch:{
			
		},
		created() {
			this.getAddress()
		},
		methods: {
			getAddress(){
				get_area_list({
					limit: 10000,
					page: 1
				}).then(res=>{
					this.lists = res.data
					this.dazhouDatas = []
					// 获取大洲
					this.lists.forEach(item => {
						if(item.level==this.startLevel){
							if(this.startLevel==1){
								this.dazhouDatas.push(item)
							}else if(this.startLevel==2){
								this.guojiaData.push(item)
							}
						}
					});
					// 初始默认值
					if(this.value){
						this.selectData = this.value
						this.guojiaData = this.selectData.continentId ?this.getSubData(this.selectData.continentId):this.getLevelData(2)
						if(this.endLevel>=3){
							this.cityData = this.getSubData(this.selectData.countryId)
						}
						if(this.endLevel>=4){
							this.quYuData = this.getSubData(this.selectData.cityId)
						}
						
					}
				})
			},
			// 按照父级id获取子集
			getSubData(parentId){
				if(this.lists && this.lists.length>0){
					let nodes = []
					this.lists.forEach(item => {
						if(item.parentId==parentId){
							nodes.push(item)
						}
					});
					//console.log("nodes:",nodes)
					return nodes
				}else{
					return []
				}
			},
			// 按照level来获取集合
			getLevelData(level){
				if(this.lists && this.lists.length>0){
					let nodes = []
					this.lists.forEach(item => {
						if(item.level==level){
							nodes.push(item)
						}
					});
					console.log("UUUOOO:",nodes)
					return nodes
				}else{
					return []
				}
			},
			getGuojia(areaId){
				this.clearGuojiaData()
				this.clearCityData()
				this.clearQuYuData()
				const curData = this.lists.find(item => item.areaId == areaId)
				this.selectData.continentId = areaId, // 大洲ID
				this.selectData.continentName = curData.name //大洲名称
				if(this.endLevel>=2){
					this.guojiaData = this.getSubData(areaId)
				}
				this.$emit('input',this.selectData) 
			},
			getCity(areaId){
				this.clearCityData()
				this.clearQuYuData()
				const curData = this.lists.find(item => item.areaId == areaId)
				this.selectData.countryId = areaId, // 国家id
				this.selectData.countryName = curData.name // 国家名称
				if(this.endLevel>=3){
					this.cityData = this.getSubData(areaId)
				}
				this.$emit('input',this.selectData)
			},
			getQuYu(areaId){
				this.clearQuYuData()
				const curData = this.lists.find(item => item.areaId == areaId)
				this.selectData.cityId = areaId, // 城市id
				this.selectData.cityName = curData.name // 城市名称
				if(this.endLevel>=4){
					this.quYuData = this.getSubData(areaId)
				}
				this.$emit('input',this.selectData)
			},
			setQuYu(areaId){
				const curData = this.lists.find(item => item.areaId == areaId)
				this.selectData.areaId = areaId, // 区域id
				this.selectData.areaName = curData.name // 区域名称
				this.$emit('input',this.selectData)
			},
			clearGuojiaData(){
				this.guojiaData = []
				this.selectData.countryId = '', // 国家id
				this.selectData.countryName = ''// 国家名称
			},
			clearCityData(){
				this.cityData = []
				this.selectData.cityId = '', // 城市id
				this.selectData.cityName = ''// 城市名称
			},
			clearQuYuData(){
				this.quYuData = []
				this.selectData.areaId = '', // 城市id
				this.selectData.areaName = ''// 城市名称
			}
		}
	}
</script>

<style lang="scss" scoped>
	.areaBox{
		.area-select-item{
			&+.area-select-item{
				padding-top: 15px;
			}
		}
		&.areaBox2{
			display: flex;
			.area-select-item{
				padding: 0 10px 0 0;
				&+.area-select-item{
					padding-top: 0;
				}
			}
		}
	}
</style>
